import React, { useState, useDeferredValue, useMemo } from 'react'

import List from './18-List'

export default function App() {

    const [str, setstr] = useState('')
    const deferred = useDeferredValue(str)

    const memoList = useMemo(() => {
        return <List str={deferred} />
    }, [deferred])

    // const memoList = <List str={str} />

    return (
        <div>
            <input type="text" value={str} onChange={e => setstr(e.target.value)} />

            {memoList}

        </div>
    )
}
